<!--
  Generated template for the ChatPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

	<ion-navbar>
		<ion-title>{{toUser.name}}</ion-title>
	</ion-navbar>

</ion-header>

<ion-content>
	<div class="message-wrap">
		<div *ngFor="let msg of msgList" class="message" [class.left]=" msg.userId === toUser.id " [class.right]=" msg.userId === user.id ">
			<img class="user-img" [src]="msg.userAvatar" alt="" src="">
			<ion-spinner name="dots" *ngIf="msg.status === 'pending'"></ion-spinner>
			<div class="msg-detail">
				<div class="msg-info">
					<p>
						{{msg.userName}}&nbsp;&nbsp;&nbsp;{{msg.time | relativetime}}</p>
				</div>
				<div class="msg-content">
					<span class="triangle"></span>
					<p class="line-breaker ">{{msg.message}}</p>
				</div>
			</div>
		</div>
	</div>
</ion-content>

<ion-footer no-border [style.height]="showEmojiPicker ? '255px' : '55px'">
	<ion-grid class="input-wrap">
		<ion-row>
			<ion-col col-2>
				<button ion-button clear icon-only item-right (click)="switchEmojiPicker()"><ion-icon name="md-happy"></ion-icon></button>
			</ion-col>
			<ion-col col-8>
				<ion-textarea #chat_input placeholder="Text Input" [(ngModel)]="editorMsg" (keyup.enter)="sendMsg()" (ionFocus)="onFocus()">
				</ion-textarea>
			</ion-col>
			<ion-col col-2>
				<button ion-button clear icon-only item-right (click)="sendMsg()"><ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon></button>
			</ion-col>
		</ion-row>
	</ion-grid>
	<emoji *ngIf="showEmojiPicker" [(ngModel)]="editorMsg"></emoji>
</ion-footer>